<template>
  <view class="classroom">
    <view class="video_box" v-if="videoUrl.length !== 0">
      <view
        class="item_list"
        v-for="(item, index) in videoUrl"
        :key="item.filedName"
      >
        <view class="item" v-for="(url, urli) in item.children" :key="url.id">
          <view class="title">{{ url.filedName }}</view>
          <video
            class="video_box"
            :src="url.resourceUrl"
            loop="loop"
            :autoplay="index == 0 && urli == 0 ? true : false"
          ></video>
        </view>
      </view>
    </view>
    <none-data v-if="videoUrl.length === 0" />
    <!-- <image
      @contextmenu="saveImage(imgUrl)"
      @touchstart="handleTouchStart"
      @touchend="handleTouchEnd"
      @longpress="handleLongPress"
      class="classroom_img"
      :src="imgUrl"
      mode="widthFix"
    >
    </image> -->
  </view>
</template>

<script setup>
import { getConfigEnterpriseFieldsApi } from "@/package_classroom/api/index.js";
import { onShow } from "@dcloudio/uni-app";
import { ref } from "vue";

const imgUrl = ref(
  "https://minio.gzryzl.com/huatai/2024-08-02/1722590954409classroom.png"
);
const videoUrl = ref("");
const touchStartTime = ref(0);

const handleTouchStart = (event) => {
  touchStartTime.value = new Date().getTime();
};

const handleTouchEnd = (event) => {
  if (new Date().getTime() - touchStartTime.value > 1000) {
    // 如果触摸时间超过1000毫秒，视为长按
    handleLongPress(event);
  }
};
async function getConfigEnterpriseFields() {
  const res = await getConfigEnterpriseFieldsApi("荣耀课堂");
  const { code, data } = res || {};
  console.log(data);
  if (code == 200) {
    videoUrl.value = data;
  }
}
onShow(() => {
  getConfigEnterpriseFields();
});
const handleLongPress = (event) => {
  // 调用保存图片的函数
  saveImage(imgUrl.value);
};
function saveImage(imageUrl) {
  uni.downloadFile({
    url: imageUrl,
    success: (downloadResult) => {
      if (downloadResult.statusCode === 200) {
        uni.saveImageToPhotosAlbum({
          filePath: downloadResult.tempFilePath,
          success: () => {
            uni.showToast({ title: "图片保存成功" });
          },
          fail: () => {
            uni.showToast({ title: "图片保存失败", icon: "none" });
          },
        });
      }
    },
    fail: () => {
      uni.showToast({ title: "下载图片失败", icon: "none" });
    },
  });
}
</script>

<style lang="less" scoped>
.classroom {
  .classroom_img {
    width: 100vw;
  }
  .video_box {
    width: 100%;
    .title {
      text-indent: 1em;
      height: 80rpx;
      line-height: 75rpx;
    }
  }
}
</style>